<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./../../oldVue.js"></script>
</head>

<body>
    <div id="app">
        <h2>开始存钱</h2>
        <div>每月存 :￥{{ money }}</div>
        <div>存:{{ num }}个月</div>
        <div>总共存款: ￥{{ total }}</div>
        <button @click="getMoreMoney">{{arryList[0].name}}多存一点</button>
    </div>

    <script>
        debugger;
        var app = new Vue({
            el: '#app',
            beforeCreate() { },
            created() { },
            beforeMount() { },
            mounted: () => { },
            beforeUpdate() { },
            updated() { },
            beforeDestroy() { },
            destroyed() { },
            data: function () {
                return {
                    money: 100,
                    num: 12,
                    arryList: [{name:'子树'}]
                }
            },
            computed: {
                total() {
                    return this.money * this.num;
                }
            },
            methods: {
                getMoreMoney() {
                    this.money = this.money * 2
                    this.arryList.unshift({name: '大树'})
                }
            }
        })

    </script>

</body>

</html>